<template>
  <uni-popup
      ref="ZoPopupRef"
      type="center"
      :is-mask-click="false"
  >
    <template v-if="params.type === 1">
      <view class="popup-box">
        <template v-if="params.icon === 1">
          <image class="icon-img" style="width:210rpx;" src="../../static/img/popup_success.png" mode="widthFix"></image>
        </template>
        <template v-else-if="params.icon === 2">
          <image class="icon-img" style="width:120rpx;" src="../../static/img/popup_fail.png" mode="widthFix"></image>
        </template>
        <template v-else-if="params.icon === 3">
          <image class="icon-img" style="width:120rpx;" src="../../static/img/popup_info.png" mode="widthFix"></image>
        </template>
        <view class="title">
          <text>{{ params.title }}</text>
        </view>
        <view class="content">
          <text>{{ params.content }}</text>
        </view>
        <view class="btn-box" style="margin-top: 30rpx;">
          <template v-if="params.showCancel">
            <button class="btn btn-two" :style="'border:1rpx solid;color:'+primaryColor+';'" @click="cancel">
              {{ params.cancelText }}
            </button>
            <button class="btn btn-two" :style="'color:#fff;background:'+primaryColor+';'" @click="confirm">
              {{ params.confirmText }}
            </button>
          </template>
          <template v-else>
            <button class="btn btn-one" @click="confirm">{{ params.confirmText }}</button>
          </template>
        </view>
      </view>
    </template>
    <!-- modal弹窗 -->
    <template v-else-if="params.type === 2">
      <view class="modal-box">
        <view class="modal-top">
          <text class="modal-title">{{ params.title }}</text>
          <view class="modal-content">{{ params.content }}</view>
        </view>
        <view class="modal-btn">
          <template v-if="params.showCancel">
            <view class="item" @click="cancel">{{ params.cancelText }}</view>
            <text class="line" color="#eee"></text>
            <view class="item active" @click="confirm">{{ params.confirmText }}</view>
          </template>
          <template v-else>
            <view class="item active" style="width: 500rpx;" @click="confirm">{{ params.confirmText }}</view>
          </template>
        </view>
      </view>
    </template>
  </uni-popup>
</template>

<script setup lang="ts">
import {ref, nextTick ,getCurrentInstance} from 'vue';
import {onLoad} from '@dcloudio/uni-app'

let eventChannel = null

// uni-popup的ref
const ZoPopupRef = ref<POPUP_TYPE | null>(null)
const primaryColor = ref('#1890FF')
const params = ref({
  type: 2,
  showCancel: true,
  confirmText: '确定',
  cancelText: '取消',
  title: '提示',
  content: '这是一条提示信息',
  icon: 1,
  cancle:()=> {
  },
  confirm:()=> {

  }
})
onLoad((options) => {
  params.value = Object.assign(params.value, JSON.parse(options.params))
  const instance = getCurrentInstance().proxy
  eventChannel= instance.getOpenerEventChannel();
  nextTick(() => {
    ZoPopupRef.value?.open();
  })
})
const cancel = () => {
  uni.navigateBack({
    delta: 1,
    success() {
      eventChannel.emit('cancel');
    }
  })
  //执行回调
  params.value.cancel && params.value.cancel();
  hide()
}

const confirm = () => {
  uni.navigateBack({
    delta: 1,
    success() {
      eventChannel.emit('confirm');
    }
  })
  //执行回调
  params.value.confirm && params.value.confirm();
  hide();
}

const hide = () => {
  setTimeout(() => {
    const config = {
      type: 1,
      showCancel: true,
      confirmText: '确定',
      cancelText: '取消',
      title: '',
      content: '',
      icon: 1,
    }
    params.value = config
    ZoPopupRef.value?.close();
  }, 100)// 这里时间就是弹窗显示隐藏动画时间
}

</script>

<style lang="scss">
page {
  background: transparent;
}
.modal-box{
  display: flex;
  width: 638rpx;
  flex-direction: column;
  align-items: center;
  border-radius: 16rpx;
  background: var(--White, #FFF);
  box-shadow: 0 16rpx 72rpx 0 #00000029;
}
.modal-top{
  padding: 40rpx;
  display:flex;
  flex-direction: column;
  align-items:center;
  .modal-title{
    font-size: 36rpx;
    font-weight: bold;
  }
  .modal-content{
    font-size: 30rpx;
    line-height: 46rpx;
    margin-top: 20rpx;
    color: #333333;
    text-align: left;
  }
}
.modal-btn{
  width: 100%;
  border-top: 1rpx solid #eee;
  display: flex;
  justify-content: center;
  .item{
    font-size: 32rpx;
    width: 250rpx;
    height: 120rpx;
    line-height: 120rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color:#666666;
    font-weight: 600;
  }
  .line{
    height: 120rpx;
    border-right: 1rpx solid #eee;
  }
  .active{
    color:#399E80;
  }
}
</style>
